<template>
  <div class="com">
    <div class="box">
      <div class="side" ref="side">
        <ul>
          <li
            :class="item.name === index ? 'active' : ''"
            v-for="(item, i) in goods"
            @click="sidechange(item.name)"
            :key="i"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="main" ref="main">
        <div>
          <div :id="item.name" v-for="(item, i) in goods" :key="i">
            <div class="classify-tit">{{ item.name }}</div>
            <food
              :food="it"
              v-for="(it, index) in item.foods"
              :key="index"
            ></food>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Food from "./Food.vue";
import { get } from "../../utils/tool/tool";
import BScroll from "@better-scroll/core";
export default {
  components: {
    Food,
  },
  created() {
    setTimeout(() => {
      this.goods = this.$store.state.goodsList;
      console.log(this.goods);
    }, 500);
  },

  updated() {
    this.bs = new BScroll(this.$refs.side, {
      click: true,
    });
    this.bs2 = new BScroll(this.$refs.main, {
      probeType: 3,
    });

    this.bs2.on("scroll", (pos) => {
      let arr = [];
      let start = 0;
      let y = Math.abs(pos.y);

      this.goods.forEach((v) => {
        let harr = document.getElementById(v.name).offsetHeight;
        arr.push({
          min: start,
          max: start + harr,
          tit: v.name,
        });
        start += harr;
      });

      arr.forEach((v) => {
        // console.log(v);
        if (y >= v.min && y <= v.max) {
          this.index = v.tit;
          // console.log(v.name);
          // console.log(v.tit);
        }
      });
    });
  },
  mounted() {},
  data() {
    return {
      side: [],
      index: "(冒菜)套餐自选区",
      goods: [],
    };
  },
  methods: {
    async sidechange(i) {
      await this.bs2.scrollToElement(document.getElementById(i), 500);
      this.index = i;
      console.log("i:" + i);
      console.log("this.index:" + this.index);
    },
  },
};
</script>

<style lang="less" scoped>
.com {
  height: 100%;
}
.classify-tit {
  line-height: 30px;
  padding-left: 10px;
  background-color: #ccc;
}
.box {
  display: flex;
  height: 100%;
  .side {
    width: 100px;
    overflow: scroll;
    li {
      background-color: #f2f6f9;
      border-top: 1px solid #ccc;
      height: 60px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      display: flex;
      align-items: center;
    }
    .active {
      background-color: #fff;
    }
  }
  .main {
    flex: 1;
    height: 100%;
    overflow: scroll;
  }
}
</style>